/*
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-07 15:20:58
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-03-22 21:01:34
 * @FilePath: \vform\src\App - 副本.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
<template>
  <el-config-provider :locale="elLocale">
  <div id="app">
     <VFormDesigner ref="vfDesignerRef" :global-dsv="globalDsv"
	 :designer-config="designerConfig">

      <template #customToolButtons>
        <el-button type="default" @click="submitForm"><i class="el-icon-finished"></i>保存</el-button>
      </template>
 
    </VFormDesigner>
  </div>
  </el-config-provider>
</template>

<script>
import VFormDesigner from './components/form-designer/index.vue'

import zhCNLang from 'element-plus/lib/locale/lang/zh-cn'
import enUSLang from 'element-plus/lib/locale/lang/en'

export default {
  name: 'App',
  components: {
    VFormDesigner,
  },
  data() {
    return {
      formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
      formData: {},
      optionData: {},

      designerConfig: {
        //logoHeader: false,
		// generateSFCButton: false,
		toolbarMaxWidth: 470,
      },

      //全局数据源变量
      globalDsv: {
        testApiHost: 'http://www.test1.com/api'
      },
    }
  },
  computed: {
    elLocale() {
      let curLocale = localStorage.getItem('v_form_locale') || 'zh-CN'
      return this.elLocaleMap[curLocale]
    },

  },
  methods: {
    submitForm() {
		let formJson = this.$refs.vfDesignerRef.getFormJson();
		alert(JSON.stringify(formJson));
     // this.$refs.vfDesignerRef.getFormJson().then(formData => {
        // Form Validation OK
      //  alert( JSON.stringify(formData) )
      //}).catch(error => {
        // Form Validation failed
     //   this.$message.error(error)
     // })
    }
  }
}
</script>

<style lang="scss">
  #app {
    height: 100%;
  }
</style>
